<template>
  <div>
    <zm-form :model="form" ref="form" :rules="rules">
      <zm-form-item :label="label" :label-width="labelWidth" :prop="typeKey">
        <el-radio-group v-model="form[typeKey]" @change="handleSetTypeKey">
          <el-radio
            v-for="(item, index) in filmType"
            :label="item.value"
            :key="index"
            :disabled="item.disabled"
          >
            {{ item.label }}
          </el-radio>
        </el-radio-group>
      </zm-form-item>
      <zm-form-item :prop="idKey">
      <!-- 指定影院 -->
      <div v-if="+form[typeKey] === 2">
        <cinema-assign
          :value="form[idKey]"
          :type="form[typeKey]"
          @handle-after="handleAllAfter"
        />
      </div>

      <!-- 影院分组 -->
      <div v-if="+form[typeKey] === 1" class="dib">
        <zm-form-item :label-width="labelWidth">
          <cinema-group
            :value="form[idKey]"
            :type="form[typeKey]"
            @handle-after="handleAllAfter"
          ></cinema-group>
        </zm-form-item>
      </div>
      </zm-form-item>
    </zm-form>
  </div>
</template>

<script>
import { Input } from 'element-ui'
// import tableMixin from '@/mixins/zmTableMixin'
import cinemaAssign from './components/cinemaAssign'
import CinemaGroup from './components/CinemaGroup'

export default {
  name: 'CinemaRadio',
  components: { cinemaAssign, CinemaGroup },
  // mixins: [tableMixin],
  provide () {
    return {
      $cinemaRadio: this
    }
  },
  props: {
    label: {
      type: String,
      default: '选择影院'
    },
    labelWidth: {
      type: String,
      default: '150px'
    },
    typeKey: {
      // 类型key
      type: String,
      default: 'relationType'
    },
    idKey: {
      // IDkey
      type: String,
      default: 'relationId'
    },
    disabled: {
      // 禁用指定影院、影院分组
      type: Boolean,
      default: false
    },
    value: {
      type: Object,
      default: () => {
        return {}
      }
    },
    id: {
      // IDkey
      type: String,
      default: ''
    },
    type: {
      // IDkey
      type: String,
      default: ''
    },
    prop: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      showRelation: false,
      cinemaName: [], // 影院分组select值
      filmType: [
        // 影院类型
        {
          label: '全部影院',
          value: '-1'
        },
        {
          label: '指定影院',
          value: '2',
          disabled: this.disabled
        },
        {
          label: '影院分组',
          value: '1',
          disabled: this.disabled
        }
      ],

      rules: {
        [this.typeKey]: {
          required: true,
          message: '*为必填项，不能为空',
          trigger: 'blur'
        },
        [this.idKey]: {
          required: true,
          message: '请选择影院',
          trigger: 'blur'
        }
      }

    }
  },
  computed: {
    form: {
      get () {
        return this.setForm()
      },
      set (val) {
        this.$emit(
          'input',
          JSON.parse(JSON.stringify({ ...this.value,
            ...{
              [this.idKey]: val.relationId,
              [this.typeKey]: val.relationType
            } }))
        )
      }
    }
  },
  created () {
    this.init()
  },
  methods: {
    setForm () {
      return {
        relationId: this.value[this.typeKey] === '-1' ? '-1' : this.value[this.idKey],
        relationType: this.value[this.typeKey]
          ? this.value[this.typeKey]
          : '-1'
      }
    },
    init () {
      this.form = this.setForm()
    },
    // 指定影院、影院分组 组件的回调函数
    handleAllAfter (val) {
      if (!val) {
        this.form[this.idKey] = ''
      } else {
        this.form = {
          ...this.form,
          [this.idKey]: val
        }
      }
    },
    handleSetTypeKey (val) {
      if (this.form.relationType === '-1') {
        this.form = {
          ...this.form,
          [this.idKey]: '-1'
        }
      } else {
        this.form = {
          ...this.form,
          [this.idKey]: ''
        }
      }
    },
    // 外部校验此组件
    validate () {
      return this.$refs.form.validate()
    }
  }
}
</script>

<style scoped lang='scss'>
</style>
